<template>
  <div>
    <div id="container"></div>
    <!-- !-- 如果直接写, 那么在服务端不认识, 浏览器才认识
    所以会造成前后渲染内容不一致, 报错 -->

    <!-- 这里可以单独指定这一个标签要在客户端再渲染 -->
    <client-only>
      <VueEditor />
    </client-only>
  </div>
</template>

<script>
export default {
  mounted() {
    window.onLoad = function () {
      var map = new AMap.Map("container", {
        zoom: 21, //放大级别
        // pitch: 75,
        center: [113.428132, 23.129358], //中心点坐标
        viewMode: "3D", //使用3D视图
        // mapStyle: "amap://styles/whitesmoke",
        // layers: [new AMap.TileLayer.Satellite()],
      });

      var markerList = [
        {
          name: "黑马程序员",
          x: 113.428132,
          y: 23.129358,
        },
        {
          name: "家顺大酒店",
          x: 113.295593,
          y: 23.046422,
        },
        {
          name: "犯傻比狗屎大商场",
          x: 113.293795,
          y: 23.068979,
        },
        {
          name: "太阳系",
          x: 149.1403,
          y: 35.402013,
        },
      ];
      let marker1 = [];
      markerList.forEach((element) => {
        var marker = new AMap.Marker({
          position: new AMap.LngLat(element.x, element.y), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: element.name,
        });
        marker1.push(marker);
      });

      // 将创建的点标记添加到已有的地图实例：
      map.add(marker1);

      // 插件添加*************************
      AMap.plugin("AMap.ToolBar", function () {
        //异步加载插件
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
      });
    };

    var url = `https://webapi.amap.com/maps?v=1.4.15&key=55d077bfd6606158c293e93a1f1a47f8&callback=onLoad`;
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  },
};
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  height: 500px;
}
</style>